<template>
  <div class="day-detais">
      <tem-header :title="'今日支出'"></tem-header>
      <div class="details bg">
        <ul>
            <template v-if="dayList && dayList.length">
                <li v-for="item in dayList" :class="{'income': item.incspe > 0}" class="flex-boxs flex-align-y-c bo-b">
                    <div class="left">
                        <h5>{{ item.typename }} </h5>
                        <p v-if="item.remark">{{ item.remark }}</p>
                        <p>{{ item.incspedate }}</p>
                    </div>
                    <div class="right">{{ item.incspe > 0 ? '+' : '-' }} {{ item.money }}</div>
                </li>
            </template>
            <li v-else class="error">{{ dayMeg }}</li>
        </ul>
      </div>
  </div>
</template>

<script>
import { apiIncspeList } from '@http'
import header from '@components/header'
export default {
    data () {
        return {
            dayList: null,
            dayMeg: null
        }
    },
    components: {
        'tem-header': header
    },
    created () {
        this.day()
    },
    methods: {
        // 当天记录
        day () {
            this.dayMeg = '正在加载数据...'
            apiIncspeList ({scope: 'day', incspe: -1})
                .then((response) => {
                   if (response.data.data) {
                       if (response.data.data.item) {
                        this.dayList = response.data.data.item
                       }
                       else {
                           this.dayMeg = '数据为空'
                       }
                   }
                   else {
                      this.dayMeg = '数据加载失败'
                   }
                })
                .catch((error) => {

                })
        }
    }
}
</script>

<style lang="less">
@import '../assets/style/base/b-gether-var.less';
.day-detais{
    .details{
        li{padding:@10px @15px;
            h5{font-size:@14px;
                span{font-size:@12px; color:@grey-02;}
            }
            p{margin-top:@4px; color:@grey-02;}
            .right{font-size:@14px; font-weight:bold; text-align:right;}
        }
        .income{color:@colorB;}
        .error{text-align:center; line-height:@200px;}
    }
}
</style>
